<template>
	<div class="exam-detail">

		<AppHeader :title="workDetails.homework_resources_name" titleColor="#FFF"
			backgroundColor="linear-gradient(to bottom,#09A3F9,#06AAEE)" @leftClickEvent="handleHeaderLeft()">
			<template #left>
				<img src="@/assets/images/icon-arrow-left-white.png" width="9" height="18" />
			</template>
		</AppHeader>


		<div class="score-mine">{{ workDetails.score }}</div>
		<div class="score-rate">得分率 {{ workDetails.score_rate }}</div>

		<div class="score-detail" @scroll="scrollPage">
			<div class="score-item">
				<div class="score-top">
					<b class="highlight-green">{{ workDetails.score_class_high?.split("/")[0] }}</b>/{{
            workDetails.score_class_high?.split("/")[1] }}
				</div>
				<div class="score-bottom">班级最高分</div>
			</div>
			<div class="score-item">
				<div class="score-top">
					<b class="highlight-green">{{
            workDetails.score_class_average?.split("/")[0]
          }}</b>/{{ workDetails.score_class_average?.split("/")[1] }}
				</div>
				<div class="score-bottom">班级平均分</div>
			</div>
			<div class="score-item">
				<div class="score-top highlight-green">{{ workDetails.complete_num }}</div>
				<div class="score-bottom">完成人数</div>
			</div>
		</div>

		<div class="score-table">
			<div class="table-title">分数段分析</div>
			<div class="charts-box">
				<qiun-vue-ucharts type="column" :ontap="false" :opts="options" :chartData="chartData" />
			</div>
			<div class="total-item">
				<div class="score-name">总分</div>
				<div class="score-value highlight-green">{{ workDetails.full_score }}分</div>
			</div>
			<van-divider :style="{ borderColor: '#E5E5E5', margin: '15px 0' }" />
			<div class="total-item">
				<div class="score-name">作答用时</div>
				<div class="score-value">{{ workDetails.use_time }}</div>
			</div>
		</div>

		<div class="score-details">
			<!-- 	<div class="result-list">
				<div class="item" v-for="(item, i) in resultlist" :key="i">
					<img v-if="i === 0" src="@/assets/images/written/right.png" width="23" height="16" />
					<img v-if="i === 1" src="@/assets/images/written/error.png" width="18" height="18" />
					<img v-if="i === 2" src="@/assets/images/written/halfRight.png" width="26" height="16" />
					<img v-if="i === 3" src="@/assets/images/written/unknown.png" width="12" height="18" />
					<div class="t0">{{ item.name }}</div>
					<div class="t1">{{ item.num }} </div>
				</div>
			</div> -->
			<div class="container-list" v-for="item in workList" :key="item.id">
				<div class="container-list-top" v-if="item.resourceType == 'a7527f97-14e6-44ef-bf73-3039033f128e'">
					<div class="container-list-top-left"
						:class="item.sourceObj&&item.sourceObj.total_score > 80 ? 'autoGreed' : ''">{{
                    item.words }}</div>
					<img src="@/assets/phoneticPractice/声音@3x (1).png" @click="playAudio(item.fullVideo)" />
				</div>
				<div class="container-list-top" v-if="item.resourceType == '992a5055-e9d0-453f-ab40-666b4d7030bb'">
					<div class="container-list-top-left" :class="item.sourceObj.total_score > 80 ? 'autoGreed' : ''">{{
                    item.name.replace("{", "").replace("}", "") }}</div>
				</div>
				<div class="container-list-bottom">
					<div class="container-list-bottom-left"
						v-if="item.resourceType == 'a7527f97-14e6-44ef-bf73-3039033f128e'">
						<span>[{{ item.symbol }}]</span>
						<span>{{ item.pretations }}</span>
					</div>
					<div class="container-list-bottom-left"
						v-if="item.resourceType == '992a5055-e9d0-453f-ab40-666b4d7030bb'">
						<img src="@/assets/phoneticPractice/声音@3x (1).png" @click="playAudio(item.fullVideo)"
							width="18px" />
					</div>
					<div
						:class="item.sourceObj.total_score < 60 ? 'autoRed' : item.sourceObj.total_score < 80 ? 'autoYellow' : 'autoGreed'">
						{{ Math.round(item.sourceObj.total_score)
                    }}
					</div>

				</div>
			</div>

		</div>

	</div>
	<AppLoading v-if="loading.page" />
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		toRefs,
		computed,
		reactive,
		ref
	} from "vue";
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import {
		showToast,
		Divider
	} from "vant";
	import qiunVueUcharts from "@qiun/vue-ucharts";
	import {
		request
	} from "@/api/request.js";
	import AppHeader from "@/components/AppHeader.vue";
	import audioPlayer from "@/components/audioPlayer/index.vue";
	import AppLoading from "@/components/AppLoading.vue";

	const route = useRoute();
	const router = useRouter();
	const {
		id,
		versionId,
		mission_type
	} = route.query;
	const score = ref([])
	const state = reactive({
		loading: {
			page: false,
		},
		baseUrl: '',
		workDetails: {},
		workList: [],
		chartData: {},
		options: {},
	});

	const resultlist = [{
			id: 1,
			name: "已做对",
			num: '0'
		},
		{
			id: 2,
			name: "已做错",
			num: '0'
		},
		{
			id: 3,
			name: "已半对",
			num: '0'
		},
		{
			id: 4,
			name: "已半对",
			num: '0'
		}
	];

	const handleHeaderLeft = () => {
		router.go(-1);
	};
	const scrollPage = (e) => {
		console.log(e)
	};

	const autoColor = (num) => {
		if (num < 60) {
			return 'autoRed' //#FA192C
		} else if (num > 60 && num < 80) {
			return 'autoYellow' //#FF9917
		} else if (num > 80) {
			return 'autoGreed' //#0CB76C
		}
	}
	const autoScoreColor = (my, all) => {
		if (my < all) {
			return 'autoRed' //#FA192C
		} else {
			return 'autoGreed' //#FF9917
		}
	}


	const fetchHomeworkData = ({
		id,
		versionId,
		mission_type
	}) => {
		request({
				url: "/api/homework/getStudentHomeworkListEveryStatistics",
				method: "post",
			}, {
				data: {
					homeworkid: id,
					versionId,
					mission_type,
				},
			})
			.then((res) => {
				if (res && +res.code === 1 && res.data) {
					const {
						score_arr,
						...data
					} = res.data;
					const scoreMax = Object.values(score_arr).sort((a, b) => b - a)[0];
					const yAxisMax = (5 - scoreMax % 5) + scoreMax;
					const chartParams = {
						categories: Object.keys(score_arr),
						series: [{
							name: "人数",
							data: Object.values(score_arr),
							color: "#0CB76C",
						}, ],
					};
					state.workDetails = data
					state.baseUrl = state.workDetails.json.resmain
					state.workList = state.workDetails.json.resource.items
					state.chartData = chartParams;
					state.options = {
						padding: [30, 15, 15, 5],
						legend: {
							show: false,
						},
						xAxis: {
							disableGrid: true,
							rotateLabel: true,
						},
						yAxis: {
							showTitle: true,
							data: [{
								min: 0,
								max: yAxisMax,
								title: "人数",
								titleOffsetX: -10,
								titleOffsetY: -10,
							}, ],
						},
						extra: {
							column: {
								type: "group",
								width: 12,
								activeBgColor: "#000000",
								activeBgOpacity: 0.08,
							},
						},
						ontap: false,
					};


				} else {
					showToast(res.msg);
				}
			})
			.catch((e) => {
				showToast(e.msg || (e.body && e.body.msg));
			})
			.finally(() => {
				state.loading.page = false;
			});
	};
	onMounted(() => {
		state.loading.page = true;
		fetchHomeworkData({
			id,
			versionId,
			mission_type,
		});
	});

	const {
		loading,
		baseUrl,
		workList,
		workDetails,
		chartData,
		options
	} = toRefs(state);
</script>

<style lang="scss" scoped>
	.container-list {
		margin-top: 10px;
		background: #FFFFFF;
		width: 355px;
		height: max-content;
		display: flex;
		flex-direction: column;
		border-radius: 5px;
		color: #8E8E8E;
		font-size: 14px;

		.container-list-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px;
			font-size: 16px;
			color: #333333;

			img {
				width: 18px;
				height: 14px;
			}
		}

		.container-list-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 10px 10px 10px;

			div:nth-child(2) {
				color: #FA192C;
			}

			.container-list-bottom-left {
				span:nth-child(2) {
					margin-left: 10px;
				}
			}

		}
	}

	.exam-detail {
		width: 100%;
		height: 100%;
		background-image: url(../../assets/images/detail-banner.png);
		background-repeat: no-repeat;
		background-size: 375px 377px;
		background-position: top center;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 10px;
		box-sizing: border-box;
		overflow: auto;
	}

	.score-mine {
		font-weight: 500;
		font-size: 66px;
		color: #ffffff;
		line-height: 92px;
		font-style: normal;
		margin-top: 118px;
		margin-bottom: 5px;
	}

	.score-rate {
		font-size: 18px;
		color: #ffffff;
		line-height: 25px;
	}

	.score-detail {
		margin-top: 33px;
		width: 355px;
		height: 104px;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 15px 15px 0px 0px;
		display: flex;
		justify-content: space-evenly;
	}

	.score-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 20px 0;
		box-sizing: border-box;
	}

	.score-top {
		font-weight: 500;
		font-size: 24px;
		color: #8e8e8e;
		line-height: 40px;
		font-style: normal;
		margin-bottom: 7px;
	}

	.score-bottom {
		font-weight: 500;
		font-size: 12px;
		color: #8e8e8e;
		line-height: 17px;
		font-style: normal;
	}

	.score-table {
		width: 355px;
		background: #ffffff;
		border-radius: 15px;
		padding: 10px;
		box-sizing: border-box;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.table-title {
		font-weight: bold;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		font-style: normal;
	}

	.total-item {
		display: flex;
		justify-content: space-between;
	}

	.score-name {
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		font-style: normal;
	}

	.score-value {
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		font-style: normal;
	}

	.highlight-green {
		color: #0cb76c;
		font-weight: normal;
	}

	.highlight-red {
		color: #fa192c;
		font-weight: normal;
	}

	.charts-box {
		width: 337px;
		height: 255px;
	}

	.title {
		margin: 20px 0;
		font-size: 16px;
		color: #8E8E8E !important;
		line-height: 25px;
		text-align: left;
	}




	.autoRed {
		color: #FA192C !important;
	}

	.autoYellow {
		color: #FF9917 !important;
	}

	.autoGreed {
		color: #0CB76C !important;
	}
</style>